import React, { Component } from "react";
export default class Control extends Component {
    state = { inp1: "", inp2: "", inp3: "" }; //声明一个状态
    content = (type) => {
        return (e) => {
            //!e为事件对象，e.target是指目标元素
            this.setState({ [type]: e.target.value });
        };
    };

    // 另一种写法：
    /*    onContent = (type, e) => {
        this.setState({ [type]: e.target.value });
    }; */
    render() {
        const { inp1, inp2, inp3 } = this.state;
        return (
            <div>
                {/* 每一个输入框要实现的功能是一样的，都是随着输入而改变，
                绑定事件，改变状态，来控制每一个输入框 */}
                <input
                    value={inp1}
                    onChange={this.content("inp1")}
                    placeholder="请输入要写的内容："
                />
                <input value={inp2} onChange={this.content("inp2")} />
                <input value={inp3} onChange={this.content("inp3")} />

                {/* 另一种写法 */}
                {/* <input value={inp1} onChange={(e) => this.content("inp1",e)} />
                <input value={inp2} onChange={(e)=>this.content("inp2",e)} />
                <input value={inp3} onChange={(e) => this.content("inp3",e)} /> */}
            </div>
        );
    }
}
